<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>2.不用函数柯里化</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /* 此处一定要写babel */
       
			//1.创建组件
			class Login extends React.Component {
				//初始化状态
				state = {
					username: '',
					password: '',
				}
				
				//保存表单数据到状态中
				saveFormData = (dataType,event) => {                  
					this.setState({
                            [dataType]:event.target.value
                        })
				}
				handleSubmit = (event) => {
					//阻止表单提交默认刷新页面的行为
					event.preventDefault()
					const { username, password } = this.state
					// const {username,password} = this
					alert(`输入的用户名是${username},我输入的密码是${password}`)
				}

				render() {
					return (
						<form
							action="http://www.atguigu.com"
							onSubmit={this.handleSubmit}
						>
							用户名:
							<input
								onChange={event=>
                                    this.saveFormData('username',event)
                                }
								type="text"
								name="username"
							/>
							密码:
							<input
								onChange={event=>
                                    this.saveFormData('password',event)
                                }
								type="password"
								name="password"
							/>
							<button>登录</button>
						</form>
					)
				}
			}
			//2.渲染虚拟DOM到页面
			ReactDOM.render(<Login />, document.getElementById('test'))
		</script>
</body>

</html>